<template>
	<view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20" >
			<u-search placeholder="Customer order number to search" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
		</view>
		<u-card padding="16" v-for="(item,index) in dataList" :key="index">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="8">
							<view class="u-m-t-5 weikaishi3">
								<span><u-icon name="home" size="30" labelSize="15px" labelColor="#000000"></u-icon>{{item.customerName}}</span>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="u-line-1">
								<span><u-button type="primary" size="mini" @click="querenshenhe(item)">Review</u-button></span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="order" size="29" labelSize="14px" labelColor="#000000" label="Order No." color="#000000"></u-icon>：{{item.customerNumber}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="calendar" size="29" labelSize="14px" labelColor="#000000" label="Create Time"></u-icon>：{{item.createTime}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="home" size="29" labelSize="14px" labelColor="#000000" label="Warehouse"></u-icon>：{{item.warehouseName}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi3">
								<span><u-icon name="clock" size="29" labelSize="14px" labelColor="#000000" label="Total" color="#000000"></u-icon>：{{item.numall}}/{{item.volumeall}}m3</span>
							</view>
						</u-col>
						<u-col span="12" v-if="item.numall == item.realNumall">
							<view class="weikaishi3 yiwancheng">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#00c300" label="Actual In" color="#00c300"></u-icon>：{{item.realNumall}}</span>
							</view>
						</u-col>
						<u-col span="12" v-else>
							<view class="weikaishi3 yizuofei">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#e84d74" label="Actual In" color="#e84d74"></u-icon>：{{item.realNumall}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-collapse>
						<u-collapse-item :title="'Category Count: '+item.goodsNum">
							<view v-for="(item1,index1) in item.list" :key="index1">
								<u-row >
									<u-col span="12">
										<view class="yiwancheng weikaishi3">
											<span>{{item1.goodsNumber}},{{item1.goodsname}},{{item1.goodsNo}}</span>
										</view>
									</u-col>
									<u-col span="6">
										<view class="weikaishi6">
											<span>Packaging: {{item1.singlePacking}}</span>
										</view>
									</u-col>
									<u-col span="6">
										<view class="weikaishi6">
											<span>Specs: {{item1.goodsSpecs}}</span>
										</view>
									</u-col>
									<u-col span="12">
										<view class="u-line-1 weikaishi4">
											<span><u-icon name="clock" size="29" labelSize="14px" labelColor="#000000" label="Should In" color="#000000"></u-icon>：{{item1.putNum}}/{{item1.detailedPutvolume}}m3</span>
										</view>
									</u-col>
									<u-col span="12" v-if="item1.putNum == item1.realNum">
										<view class="u-line-1 yiwancheng weikaishi4">
											<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#00c300" label="Actual In" color="#00c300"></u-icon>：{{item1.realNum}}</span>
										</view>
									</u-col>
									<u-col span="12" v-else>
										<view class="u-line-1 yizuofei weikaishi4">
											<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#e84d74" label="Actual In" color="#e84d74"></u-icon>：{{item1.realNum}}</span>
										</view>
									</u-col>
									<u-col span="6" text-align="right" v-if="item1.singleState == 'Pending Review'">
										<view class="u-m-t-2">
											<span><u-button type="default" size="default" @click="toGoods(item1)">Goods List</u-button></span>
										</view>
									</u-col>
									<u-col span="6" text-align="right" v-if="item1.singleState == 'In Stock'">
										<view class="u-m-t-2">
											<span><u-button type="default" size="default" @click="toGoodstoo(item1)">Goods List</u-button></span>
										</view>
									</u-col>
									<u-col span="6" text-align="right" v-if="item1.singleState == 'Pending Review'">
										<view class="u-m-t-2">
											<span><u-button type="primary" size="default" @click="shenhegoods(item1)">Single Item Review</u-button></span>
										</view>
									</u-col>
									<u-col span="6" text-align="right" v-if="item1.singleState == 'In Stock'">
										<view class="u-m-t-2">
											<span><u-button type="error" size="default" @click="revokegoods(item1)">Single Item Revoke</u-button></span>
										</view>
									</u-col>
									<u-col span="12" text-align="right" >
										<view class="u-m-t-30 u-line-1">
										</view>
									</u-col>
								</u-row>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</u-card>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dataList: [],
				keyword:'',
			}
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
		},
		onShow() {
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			toGoods(e){
				this.$Router.push({ 
					name: 'storage_put_examine_sum',
					params: { 
						storageNumber:e.storageNumber ,
						goodsId:e.goodsId
					},
				})
			},
			toGoodstoo(e){
				this.$Router.push({ 
					name: 'storage_put_examine_sum_too',
					params: { 
						storageNumber:e.storageNumber ,
						goodsId:e.goodsId
					},
				})
			},
			revokegoods(item){
				uni.showModal({
					content: 'Confirm to revoke single item?',
					confirmText: 'Confirm',
					cancelText: 'Cancel',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: 'Loading'
							})
							this.$http.post('/rest/storagePut/revokegoods',{
							},{
								params:{
									storageNumber: item.storageNumber,
									goodsId: item.goodsId
								},
								header: {
									'Authorization' :uni.getStorageSync('token'),
								}
							}).then(res => {
								uni.hideLoading()
								if(res.data.code == 200) {
									this.$refs.uToast.show({
										title: 'Single item revoked successfully',
										type: 'success'
									})
									setTimeout(() => {
										this.refresh()
									}, 500)
								} else {
									this.$refs.uToast.show({
										title: res.data.message,
										type: 'error'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			shenhegoods(item){
				uni.showModal({
					content: 'Confirm to review single item?',
					confirmText: 'Confirm',
					cancelText: 'Cancel',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: 'Loading'
							})
							this.$http.post('/rest/storagePut/shenhegoods',{
							},{
								params:{
									storageNumber: item.storageNumber,
									goodsId: item.goodsId
								},
								header: {
									'Authorization' :uni.getStorageSync('token'),
								}
							}).then(res => {
								uni.hideLoading()
								if(res.data.code == 200) {
									this.$refs.uToast.show({
										title: 'Single item reviewed successfully',
										type: 'success'
									})
									setTimeout(() => {
										this.refresh()
									}, 500)
								} else {
									this.$refs.uToast.show({
										title: res.data.message,
										type: 'error'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			querenshenhe(item){
				uni.showModal({
					content: 'Confirm to complete review?',
					confirmText: 'Confirm',
					cancelText: 'Cancel',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: 'Loading'
							})
							this.$http.post('/rest/storagePut/confirm',{
							},{
								params:{
									storageNumber: item.storageNumber,
								},
								header: {
									'Authorization' :uni.getStorageSync('token'),
								}
							}).then(res => {
								uni.hideLoading()
								if(res.data.code == 200) {
									this.$refs.uToast.show({
										title: 'Review successful',
										type: 'success'
									})
									setTimeout(() => {
										this.refresh()
									}, 500)
								} else {
									this.$refs.uToast.show({
										title: res.data.message,
										type: 'error'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			refresh(){
				uni.showLoading({
					title: 'Loading'
				})
				this.$http.post('/rest/storagePut/confirmsplist',{
				},{
					params: {
						condition: this.keyword,
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					this.dataList = res.data.data
				})
				uni.hideLoading()
			},
			search(e){
				this.refresh()
			},
		},
	}
</script>
